<template>
  <div class="withdraw">
    <div class="withdraw_top">
      <div class="withdraw_tit">
        <div class="go_back" @click="back"></div>
        <div class="withdraw_name"></div>
      </div>
      <div class="withdraw_menu">
        <div class="withdraw_title">
          <span>提现金额</span>
          <img @click="toShow" src="/static/picture/query.png" />
        </div>
        <div class="withdraw_nav">
          <input class="input_" v-model.trim="money"  maxlength="6"  @input="oninput" />
          <span>¥</span>
          <div class="nav_all" @click="all">全部提现</div>
          <!-- <div class="nav_num" v-text="infor.balance"></div>
          <div class="nav_all" @click="all">全部提现</div>-->
        </div>
        <div class="money-number">账户余额 ¥{{infor.balance}}</div>
      </div>
    </div>
    <div class="withdraw_ali">
      <div class="withdraw_ali_left">
        <div class="ali_checked"></div>
        <span>提现支付宝账号</span>
      </div>
      <div class="withdraw_ali_right" @click="toClick">
        <span class="span_">{{text}}</span>
        <span class="edit_go"></span>
      </div>
      <!-- <router-link :to="{path:'/edit',query:{title:text}}"></router-link> -->
    </div>
    <!-- <div class="withdraw_weixin">
            <div class="weixin_checked"></div>
            <div class="weixin_info"><span class="weixin_icon"></span>提现微信</div>
    </div>-->
    <!-- <div class="withdraw_sam">
      <div class="sam_name">提现金额</div>
      <div class="sam_input">
        <input type="text" v-model.trim="money" class="sam" @input="oninput" placeholder="请输入提现金额" />
      </div>
    </div>-->
    <div class="with_true" @click="draw">确认提现</div>
    <div class="container" v-if="container" @click="close"></div>
    <div class="mask-content" v-if="container">
      <div class="title">帮助说明</div>
      <div class="text">1、大元<span style="color：#2791E9">1元</span>即可提现。</div>
      <div class="text">2、每天最多只能提现一次</div>
      <div class="text">3、每次限提500元。</div>
      <div class="bottom-btn" @click="close">确定</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Noalipay",
  data() {
    return {
      container: false,
      text: "",
      money: "",
      token: "",
      infor: ""
    };
  },
  methods: {
    toShow() {
      this.container = true;
    },
    close() {
      this.container = false;
    },
    toClick() {
      this.$router.push({ path: "/edit", query: { title: this.text } });
    },
    back() {
      this.$router.go(-1);
    },
    draw() {
      if (this.money == "") {
        Toast("提现金额不能为空");
        return;
      } else {
        if (this.text == "添加账号") {
          Toast("请完善支付宝信息");
          return;
        } else {
          if (parseInt(this.money) < 1) {
            Toast("提现金额不能小于一元");
            return;
          }
          if (parseInt(this.money) > parseInt(this.infor.balance)) {
            Toast("提现金额不能超过可提奖金金额");
            return;
          }
          let nums=this.aMul(this.money,100);
          var params = new URLSearchParams();
          params.append("amount", nums); //你要传给后台的参数值 key/value
          params.append("type", 1);
          this.$axios({
            url: "/v1/pay/cashApply",
            method: "post",
            data: params,
            headers: {
              "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
              Authorization: "bearer " + this.token
            }
          }).then(respanse => {
            var res = respanse.data;
            if (res.code == 200) {
              Toast(res.msg);
              this.$router.push({ path: "/center" });
            } else if (res.data.code == 10000) {
              Toast(res.data.msg);
              this.$router.push({ path: "/login" });
            } else {
              Toast(res.msg);
            }
          });
        }
      }
    },
    all() {
        this.money = this.infor.balance;
      if (+this.money < 1) {
        Toast("提现金额不能小于一元");
        return;
      }
      
    },
    aMul(arg1,arg2){ 
        var m=0,s1=arg1.toString(),s2=arg2.toString(); 
        try{m+=s1.split(".")[1].length}catch(e){} 
        try{m+=s2.split(".")[1].length}catch(e){} 
        return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m) 
    },
    oninput(e) {
      // 通过正则过滤小数点后两位
      e.target.value = e.target.value.match(/^\d*(\.?\d{0,2})/g)[0] || null;

      this.money = e.target.value;
    }
  },
  created() {
    document.title = "提现";
    if (localStorage.token) {
      this.token = localStorage.getItem("token");
    } else {
      this.$router.push({ path: "/login" });
    }
    this.$axios({
      url: "/v1/user/getUserInfo",
      method: "post",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
        Authorization: "bearer " + this.token
      }
    }).then(respanse => {
      var res = respanse.data;
      if (res.code == 200) {
        this.infor = res.data;
        if (res.data.ali_no !== "") {
          this.text = "修改账号";
        } else {
          this.text = "添加账号";
        }
      } else {
        Toast(res.msg);
      }
    });
  }
};
</script>
<style lang="less" scoped>
.container {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #989898;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.3;
  z-index: 3;
}
.mask-content {
  width: 580px;
  height: 380px;
  background: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 20px;
  z-index: 4;
  .title {
    color: rgba(74, 74, 74, 1);
    font-size: 32px;
    text-align: center;
    width: 100%;
    margin: 30px 0 44px 0;
  }
  .text {
    width: 100%;
    padding-left: 46px;
    box-sizing: border-box;
    color: rgba(51, 51, 52, 1);
    font-size: 28px;
  }
  .bottom-btn {
    width: 100%;
    text-align: center;
    height: 100px;
    color: #4a90e2;
    font-size: 32px;
    line-height: 100px;
    border-top: 1px solid #D8D8D8;
    margin-top: 50px;
  }
}
.withdraw {
  width: 100%;
  height: 100%;
  background: #f8f8f8;
  position: relative;
}
.withdraw_top {
  width: 100%;
  height: 180px;
  background: url(/static/images/withdraw.png) no-repeat center center;
  padding-top: 40px;
  background-size: 100% 100%;
}
.withdraw_tit {
  width: 720px;
  height: 48px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
}
.withdraw_tit .go_back {
  width: 48px;
  height: 48px;
  background: url(/static/images/team_go_back.png) no-repeat center center;
  background-size: 100% 100%;
}
.withdraw_tit .withdraw_name {
  color: #333333;
  font-size: 34px;
  font-weight: 600;
  margin-left: 280px;
}
.withdraw_menu {
  width: 698px;
  /* height: 138px; */
  background: #fff;
  margin: 0 auto;
  margin-top: 42px;
  padding: 56px 32px 0 32px;
  border-radius: 20px;
  box-sizing: border-box;
}
.withdraw_menu .withdraw_title span {
  font-size: 32px;
  color: rgba(51, 51, 52, 1);
}
.withdraw_menu .withdraw_title img {
  width: 36px;
  height: 36px;
  margin-left: 20px;
}

.withdraw_menu .withdraw_title {
  /* padding-left: 32px; */
  display: flex;
  align-items: center;
}
.withdraw_menu .withdraw_nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100px;
  margin: 0 auto;
  margin-top: 12px;
  position: relative;
  /* border-bottom: solid 1px #e4e4e4; */
}
.withdraw_menu .withdraw_nav .input_ {
  width: 100%;
  height: 100px;
  border: 0;
  color: rgba(51, 51, 52, 1);
  font-size: 76px;
  border-bottom: solid 1px #e4e4e4;
  position: absolute;
  left: 0;
  top: 0;
  padding: 0 250px 0 64px;
  box-sizing: border-box;
}
.withdraw_menu .withdraw_nav span {
  color: rgba(51, 51, 52, 1);
  font-size: 56px;
  position: absolute;
  left: 0;
  top: 10px;
}
.withdraw_menu .withdraw_nav .nav_all {
  /* width: 156px;
  height: 52px; */
  padding: 6px 20px;
  border-radius: 26px;
  color: #333334;
  font-size: 28px;
  text-align: center;
  background: #ffe514;
  position: absolute;
  right: 54px;
  top: 20px;
}
.money-number {
  font-size: 28px;
  color: #9b9b9b;
  width: 100%;
  padding: 36px 0 60px 0;
}

.withdraw_menu .nav_num {
  color: #fe3b30;
  font-size: 36px;
  font-weight: bold;
}
/* .withdraw_menu .nav_all {
  width: 156px;
  height: 52px;
  border-radius: 26px;
  color: #333334;
  font-size: 28px;
  text-align: center;
  background: #ffe514;
  line-height: 52px;
  position: relative;
  top: -20px;
} */
.withdraw_ali {
  width: 698px;
  height: 124px;
  margin: 0 auto;
  margin-top: 250px;
  display: flex;
  align-content: flex-start;
  line-height: 124px;
  border-radius: 20px;
  justify-content: space-between;
  /* background: #fff; */
}
/* .withdraw_ali .ali_check {
  width: 40px;
  height: 40px;
  background: url(/static/images/check.png) no-repeat center center;
  background-size: 100% 100%;
  margin-top: 40px;
  margin-left: 30px;
} */
.withdraw_ali .withdraw_ali_left {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.withdraw_ali .withdraw_ali_left span {
  color: #333334;
  font-size: 28px;
  margin-left: 32px;
}
.withdraw_ali .ali_checked {
  width: 40px;
  height: 40px;
  background: url(/static/images/checked.png) no-repeat center center;
  background-size: 100% 100%;
  /* margin-top: 40px;
  margin-left: 30px; */
}
/* .withdraw_ali .ali_icon {
  width: 64px;
  height: 64px;
  background: url(/static/images/ali.png) no-repeat center center;
  background-size: 100% 100%;
  display: inline-block;
  vertical-align: middle;
  margin-left: 30px;
  margin-right: 22px;
} */
.withdraw_ali_right {
  font-size: 28px;
  color: #9b9b9b;
  position: relative;
  margin-right: 30px;
  .span_ {
    font-size: 28px;
    color: #9b9b9b;
  }
  .edit_go {
    width: 16px;
    height: 16px;
    position: absolute;
    border-bottom: 1px solid #9b9b9b;
    border-right: 1px solid #9b9b9b;
    top: 54px;
    left: 112px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
}
/* .withdraw_ali .ali_edit {
  font-size: 24px;
  color: #9b9b9b;
  position: relative;
} */

.withdraw_weixin {
  width: 698px;
  height: 124px;
  margin: 0 auto;
  margin-top: 26px;
  display: flex;
  align-content: flex-start;
  line-height: 124px;
  border-radius: 20px;
  background: #fff;
}
.withdraw_weixin .weixin_check {
  width: 40px;
  height: 40px;
  background: url(/static/images/check.png) no-repeat center center;
  background-size: 100% 100%;
  margin-top: 40px;
  margin-left: 30px;
}
.withdraw_weixin .weixin_checked {
  width: 40px;
  height: 40px;
  background: url(/static/images/checked.png) no-repeat center center;
  background-size: 100% 100%;
  margin-top: 40px;
  margin-left: 30px;
}
.withdraw_weixin .weixin_icon {
  width: 64px;
  height: 64px;
  background: url(/static/images/weixin.png) no-repeat center center;
  background-size: 100% 100%;
  display: inline-block;
  vertical-align: middle;
  margin-left: 30px;
  margin-right: 22px;
}
.withdraw_weixin .weixin_info {
  font-size: 28px;
  color: #000000;
}
.withdraw_sam {
  width: 698px;
  height: 124px;
  margin: 0 auto;
  margin-top: 26px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  line-height: 124px;
  border-radius: 20px;
  background: #fff;
}
.withdraw_sam .sam_name {
  margin-left: 30px;
  font-size: 28px;
  color: #333334;
}
.withdraw_sam .sam_input {
  margin-right: 32px;
  width: 196px;
  height: 40px;
}
.withdraw_sam .sam_input .sam {
  line-height: 40px;
  width: 100%;
  font-size: 28px;
  border: none;
  text-align: right;
}
.with_true {
  width: 698px;
  height: 100px;
  background: #ffe514;
  border-radius: 50px;
  line-height: 100px;
  text-align: center;
  font-size: 32px;
  color: #333334;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px;
  margin: auto;
}
</style>